@primaryColor: #2080f0;
@successColor: #18a058;
@dangerColor: #d03050;
@warningColor: #f0a020;

@borderColor: #dcdee0;
@backgroundColor: #fff;
@textColor: #323233;
@textColor5: #fff;
@textColor2: #969799;
@placeholder: #969799;
@disabledOpacity: 0.5;
@borderRadius: 2px;
@colorGray: #f2f3f5;

.o-menu {
  ul {
    li {
      /*ul {display: none;}*/
    }
  }

  .icon-arrow {
    font-size: 14px;
    transform: scale(.8);
    margin-left: 5px;
    display: block;
    cursor: pointer;
    transition: all .3s;
    height: 16px;
    width: 16px;
  }

  li {
    &.disabled {
      opacity: @disabledOpacity;
      cursor: not-allowed;
      .o-menu-title {
        cursor: not-allowed
      }
    }

    // 展开状态
    &.is-down {
      >.o-menu-title {
        color: @primaryColor;

        .icon-arrow {
          transform: rotate(180deg) scale(.8)
        }
      }
    }

    // 选中状态
    &.selected {
      >.o-menu-title {
        @apply bg-gray-100 dark:bg-gray-700;
        color: @primaryColor
      }
    }
  }

  .o-menu-title {
    display: flex;
    align-items: center;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
    height: 50px;
    cursor: pointer;
    padding: 0 20px;
    transition: all .3s;
    justify-content: space-around;

    .name {
      flex: 2;
    }

    .icon {
      display: flex;
      align-items:center;
      margin-right: 3px;
      font-size: 16px;
    }
  }

  &.horizontal {
    >ul {
      display: flex;
      line-height: 40px;
      border-bottom: 1px solid @borderColor;
    }

    li {
      position: relative;

      ul {
        background: #fff;
        position: absolute;
        box-shadow: 0 0 12px rgba(0, 0, 0, .12);
        z-index: 10;
        left: 101%;
        top: 0;

        &.layer-1 {
          left: 0;
          top: inherit;
        }

        li {
          &:after {
            display: none;
          }
        }
      }

      &:after {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: @primaryColor;
        opacity: 0;
        transition: all .3s;
      }

      &:hover {
        >.o-menu-title {
          color: @primaryColor;
        }

        &:after {
          opacity: 1;
        }
      }
    }
  }

  &.vertical {
    li {
      line-height: 40px;

      &:hover {
        >.o-menu-title {
          @apply bg-gray-100 dark:bg-gray-700;
        }
      }
    }

    // 缩进
    .layer-1 {
      .o-menu-title {
        padding-left: 40px;
      }
    }

    .layer-2 {
      .o-menu-title {
        padding-left: 60px;
      }
    }

    .layer-3 {
      .o-menu-title {
        padding-left: 80px;
      }
    }
  }

  &.o-collapsed {
    width: 60px;

    // 第一级只显示一个icon
    .layer-0 {
      >li>.o-menu-title {
        .icon {
          margin: 5px 0;
        }

        .icon-arrow,
        .name {
          display: none;
        }

        &:hover {
          @apply bg-gray-100 dark:bg-gray-700;
        }
      }
    }

    li {
      position: relative;

      ul {
        position: absolute;
        left: 100%;
        top: 0;
        box-shadow: 0 0 12px rgba(0, 0, 0, .12);
        z-index: 10;
      }
    }

    .o-menu-title {
      padding: 0 20px !important;
    }
  }

  // 不同主题
  &.dark {
    background: rgb(68 75 80);
    color: #fff;

    &.horizontal {
      ul {
        background: rgb(68 75 80);
      }
    }

    &.vertical {
      ul {
        background: rgb(68 75 80);
      }

      li {
        &:hover {
          >.o-menu-title {
            background: @primaryColor;
            color: #fff;
          }
        }

        &.is-down {
          >.o-menu-title {
            color: #fff;
          }
        }
      }
    }
  }

  // 动画
  .menu-enter-active {
    animation: menu-enter .3s forwards;
  }

  .menu-leave-active {
    animation: menu-exit .3s forwards;
  }
}

@keyframes menu-enter {
  0% {
    opacity: 0;
    height: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes menu-exit {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    height: 0;
  }
}